<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>

<table class="layui-hide" id="ID-table-demo-editable" lay-filter="test"></table>

<!--行工具栏模板-->
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
    </div>
</script>
<!--头部工具栏-->
<script type="text/html" id="toolBar">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-sm" lay-event="add">新增</a>
        <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="batchDelete">批量删除</a>
    </div>
</script>


<script src="../layui/layui.js"></script>
<script>
    layui.use(function () {

        let table = layui.table;
        let form = layui.form;
        let util = layui.util;

        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-editable',  // id选择器  实现元素的绑定
            url: '../data/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口  ?page  &limit
            toolbar: '#toolBar',
            id:"user",   // 自定义表格的id属性
            page: true,//  开启分页
            limits:[5,10,15,20],
            limit:5,
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'id', title: 'ID', sort: true},
                {field: 'username', title: '用户名'},
                {field: 'sex', title: '性别', sort: true},
                {field: 'city', title: '城市'},
                {field: 'sign', title: '签名'},
                {field: 'experience', title: '积分', sort: true},
                {fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
            ]],
            height: 550
        });

        // 表格行工具栏监听
        table.on('tool(test)', function (obj) {
            let data = obj.data; // 获得当前行数据

            sessionStorage.setItem("user",JSON.stringify(data))

            if (obj.event == 'edit') {
                layer.open({
                    type: 2, // iframe 层类型
                    area: ['500px', '400px'],
                    title: '编辑',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: false, // 允许全屏最小化
                    anim: 1, // 0-6 的动画形式，-1 不开启
                    content: './06-userForm.html',
                    move:false,    //  禁止拖拽
                    resize:false ,  // 禁止改变窗口大小
                    end:function (){
                        table.reload("user")
                    }
                });
            } else if (obj.event == 'delete') {
                layer.msg("删除用户信息id=" + data.id)
            }
            //  发送异步请求   根据id查询用户信息    {username,id}
            // for表单的数据回显
            //  form.val()
        })

        // 头部工具栏事件
        table.on('toolbar(test)', function (obj) {
            let id = obj.config.id;
            let checkStatus = table.checkStatus(id);
            switch (obj.event) {
                case 'batchDelete':
                    let data = checkStatus.data;
                    // 遍历选中行数据   获取选中行id    ()=>{}
                    let ids = data.map(lineData => lineData.id)
                    if (ids.length==0){
                        layer.msg("请至少选择一条数据")
                        return;
                    }
                    // 发送异步请求 删除数据
                    layer.msg(JSON.stringify(ids))
                    break;
                case 'add':
                    //  弹出模态窗    layer
                    layer.open({
                        type: 2, // iframe 层类型
                        area: ['500px', '400px'],
                        title: '新增',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        maxmin: false, // 允许全屏最小化
                        anim: 1, // 0-6 的动画形式，-1 不开启
                        content: './06-userForm.html',
                        move:false,    //  禁止拖拽
                        resize:false ,  // 禁止改变窗口大小
                        end:function (){
                          table.reload("user")
                        }
                    });
                    break;
            }
            ;
        });

    });
</script>

</body>
</html>